<template>
  <div>
    <div id="progress"></div>
    <div class="resume-editor" ref="editorFrom">
      <h1>新增简历</h1>
      <div>
        <!-- 基础信息 -->
        <div class="resumeSection">
          <div>
            <h2 class="resumeSection__title">基础信息</h2>
          </div>
          <div class="resumeSection__form">
            <el-form
                :rules="validatorRules.basic"
                ref="basicForm"
            >
              <el-form-item label="姓名" prop="name">
                <el-input v-model="basicResume.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile_number">
                <el-input v-model="basicResume.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="basicResume.email"></el-input>
              </el-form-item>
              <el-form-item label="生日" prop="birthday">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="basicResume.birthday" style="width: 30%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-radio v-model="basicResume.gender" :label=0 >男</el-radio>
                <el-radio v-model="basicResume.gender" :label=1 >女</el-radio>
              </el-form-item>
              <el-form-item label="婚姻情况" prop="marry">
                <el-radio v-model="basicResume.marry" :label=0>未婚</el-radio>
                <el-radio v-model="basicResume.marry" :label=1>已婚</el-radio>
              </el-form-item>
            </el-form>
            <el-button round @click="$router.push('/myResume')">取消</el-button>
            <el-button
                round
                :loading="submitLoading"
                @click="basicAddSubmit"
                size="medium"
                type="primary">保存</el-button
            >
          </div>
        </div>
        <!-- 核心信息 -->
        <div class="resumeSection">
          <div>
            <h2 class="resumeSection__title">核心信息</h2>
          </div>
          <div class="resumeSection__form">
            <el-form
                :rules="validatorRules.basic"
                ref="basicForm"
            >
              <el-form-item label="求职意向" prop="aimJobPosition">
                <el-input v-model="coreResume.aimJobPosition"></el-input>
              </el-form-item>
              <el-form-item label="期望城市" prop="desiredWorkplace">
                <el-input v-model="coreResume.desiredWorkplace"></el-input>
              </el-form-item>
              <el-form-item label="工作经验" prop="experience">
                <el-input v-model="coreResume.experience"></el-input>
              </el-form-item>
              <el-form-item label="毕业院校" prop="graduated">
                <el-input v-model="coreResume.graduated"></el-input>
              </el-form-item>
              <el-form-item label="籍贯" prop="habitation">
                <el-input v-model="coreResume.habitation"></el-input>
              </el-form-item>
              <el-form-item label="岗位类别" prop="jobCategory">
                <el-input v-model="coreResume.jobCategory"></el-input>
              </el-form-item>
              <el-form-item label="专业" prop="major">
                <el-input v-model="coreResume.major"></el-input>
              </el-form-item>
              <el-form-item label="兴趣爱好" prop="personalIntroduction">
                <el-input v-model="coreResume.personalIntroduction"></el-input>
              </el-form-item>
              <el-form-item label="薪资要求" prop="salaryRequire">
                <el-input v-model="coreResume.salaryRequire"></el-input>
              </el-form-item>
              <el-form-item label="技能" prop="skill">
                <el-input v-model="coreResume.skill"></el-input>
              </el-form-item>
            </el-form>
            <el-button round @click="$router.push('/myResume')">取消</el-button>
            <el-button
                round
                :loading="submitLoading"
                @click="coreAddSubmit"
                size="medium"
                type="primary">保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <!--    <div-->
    <!--        ref="footerAction"-->
    <!--        :class="{ 'resumeEditor-footerAction-fix': footerActionFixed }"-->
    <!--        class="resumeEditor-footerAction"-->
    <!--    >-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "resume-editor",
  data() {
    return {
      submitLoading: false,
      basicResume: {},
      coreResume: {},
      footerActionFixed: false,
      resumeId:"",
      validatorRules: {
        basic: {
          name: { required: true, trigger: "submit", message: "请输入姓名" },
          mobile_number: [
            {
              required: true,
              trigger: "submit",
              message: "请输入手机号",
            },
            {
              validator(rule, value, callback) {
                if (!/^\d{11}$/.test(value)) {
                  callback(new Error("请输入合法的手机号"));
                }
                callback();
              },

              trigger: "submit",
            },
          ],
          email: [
            { required: true, trigger: "submit", message: "请输入邮箱" },
            { type: "email", trigger: "submit", message: "请输入合法的邮箱" },
          ],
        },
        education: {
          school: {
            required: true,
            trigger: "submit",
            message: "请输入学校名称",
          },
        },
      },
    };
  },
  mounted() {
  },
  methods:{
    async basicAddSubmit(){
      try {
        const {basicResume} = this;
        await this.$store.dispatch('getAddBasicResume', basicResume)
        this.resumeId = this.$store.state.resume.resumeId
        this.$notify({
          title: '成功',
          message: '你已成功保存基本信息',
          type: 'success'
        });
      } catch (error) {
        alert(error.message)
      }
    },
    async coreAddSubmit(){
      try {
        const {resumeId,coreResume} = this;
        console.log(resumeId)
        await this.$store.dispatch('getAddCoreResume', {resumeId,coreResume})
        this.$notify({
          title: '成功',
          message: '你已成功保存核心信息',
          type: 'success'
        });
      } catch (error) {
        alert(error.message)
      }
    }
  }
};
</script>
<style lang="less">
h1{
  font-size: 30px;
  font-weight: 800;
  color: #1f2329;
}

.resumeSection {
  .el-select,
  .el-date-editor {
    width: 100%;
  }
  .bottom-action {
    display: flex;

    .el-icon-plus,
    .el-icon-delete {
      font-size: 22px;
      cursor: pointer;
      &-top {
        margin-left: auto;
      }
    }

    .el-icon-delete {
      margin-left: auto;
    }
  }
  .el-form {
    margin-bottom: 40px;
    &:not(:last-child) {
      //border-bottom: 1px solid @border-light-color;
    }
  }
}
</style>

<style lang="less" scoped>
.resume-editor {
  width: 900px;
  margin: auto;
  padding: 30px 0;
}
.resumeEditor-footerAction {
  padding: 30px 190px;
  z-index: 33;
  text-align: right;
  &-fix {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;

    box-shadow: 0 -2px 10px #eee;
  }
}
.resumeSection {
  padding: 50px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid grey;

  &__title {
    position: relative;
    color: #1f2329;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
  }
  &__form {
    width: 600px;
  }
}
</style>